<div class="layui-row">
  <div class="layui-col-lg3">
    <div class="layui-btn-group" id="device_handle_permi">
      <button class="layui-btn data_handle_btn">添加</button>
      <!-- <button class="layui-btn device_deliver">转移</button> -->
      <!-- <button type="button" class="layui-btn" id="file_input_btn"><i class="layui-icon"></i>文件导入</button> -->
    </div>
  </div>
  <div class="layui-col-lg3">
    <form class="layui-form layui-form-pane" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" l name="search_key"  placeholder="名称/ID" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <a class="layui-btn" lay-submit="" lay-filter="data-search-btn">搜索</a>
            </div>
        </div>
    </form>
  </div>
</div>

<table class="layui-table" id="base_info_manage_table" lay-filter="base_info_manage_table"></table>
<script type="text/html" id="table_info_handle_bar">
    <a class="layui-btn layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger data-count-edit" lay-event="del">删除</a>
    <!-- <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">启/停</a> -->
</script>

<script type="text/html" id="table_header">
  <p>基站管理表</p>
</script>

<!-- 添加数据表单开始 -->
<form  class="layui-form layui-form-pane " action="" id="handle_data_form" style="padding: 20px;display: none;">
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">设备ID</label>
      <div class="layui-input-block">
        <input type="text" name="device_id" lay-verify="required" lay-reqtext="必填项!" placeholder="保存后，禁止重复/更改" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" placeholder="设备自定义名称" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">型号</label>
      <div class="layui-input-block">
        <input type="text" name="model" placeholder="设备型号" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>

  <div class="layui-form-item" style="display: none;">
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">类型</label>
      <div class="layui-input-block">
        <input name="kind" type="text" list="kind_list" placeholder="输入或者选择类型" autocomplete="off" class="layui-input">
        <datalist id="kind_list">
          <option >蓝牙</option>
          <option >出库</option>
          <option >定位</option>
        </datalist>
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">安装位置</label>
      <div class="layui-input-inline">
        <select name="building" type="text" id="building_list" placeholder="安装位置" autocomplete="off" class="layui-input">
        </select>
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">报警时段</label>
      <div class="layui-input-block">
        <input type="text" name="alarm_time" id="scanner_alarm_time"  autocomplete="off" placeholder="扫描到终端即报警的时间段" class="layui-input">
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">备注</label>
      <div class="layui-input-block">
        <input type="text" name="remark"  autocomplete="off" placeholder="" class="layui-input">
      </div>
    </div>
  </div>

  <div class="layui-form-item" style="display: none;">
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">地图</label>
      <div class="layui-input-block">
        <input type="text" name="map"  autocomplete="off" placeholder="" class="layui-input">
      </div>
    </div>
  </div>
  <div class="layui-form-item" style="display: none;">
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">坐标</label>
      <div class="layui-input-block">
        <input type="text" name="location"  autocomplete="off" placeholder="" class="layui-input">
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="add_submit" id="submit_btn">提交</button>
  </div>
</form>

<!-- 添加数据表单结束 -->

<!-- 修改数据表单开始 -->
<form  class="layui-form layui-form-pane " action="" id="edit_data_form" lay-filter="edit_data_form" style="padding: 10px;display: none;">
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">设备ID</label>
      <div class="layui-input-block">
        <input type="text" name="device_id" readonly="" lay-verify="required" lay-reqtext="必填项!" placeholder="保存后，禁止重复/更改" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" placeholder="自定义名称" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">型号</label>
      <div class="layui-input-block">
        <input type="text" name="model" placeholder="设备型号" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>

  <div class="layui-form-item" style="display: none;">
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">类型</label>
      <div class="layui-input-block">
        <input name="kind" type="text" list="e_kind_list" placeholder="输入或者选择类型" autocomplete="off" class="layui-input">
        <datalist id="e_kind_list">
          <option >入库</option>
          <option >出库</option>
          <option >定位</option>
        </datalist>
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">安装位置</label>
      <div class="layui-input-block">
        <select name="building" type="text" id="e_building_list" placeholder="安装位置" autocomplete="off" class="layui-input">
        </select>
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">报警时段</label>
      <div class="layui-input-block">
        <input type="text" name="alarm_time" id="e_scanner_alarm_time"  autocomplete="off" placeholder="扫描到即报警的时间段" class="layui-input">
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">备注</label>
      <div class="layui-input-block">
        <input type="text" name="remark"  autocomplete="off" placeholder="" class="layui-input">
      </div>
    </div>
  </div>

  <div class="layui-form-item" style="display: none;">
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">地图</label>
      <div class="layui-input-block">
        <input type="text" name="map"  autocomplete="off" placeholder="" class="layui-input">
      </div>
    </div>
  </div>
  <div class="layui-form-item" style="display: none;">
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">坐标</label>
      <div class="layui-input-block">
        <input type="text" name="location"  autocomplete="off" placeholder="" class="layui-input">
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="edit_submit" id="">提交</button>
  </div>
</form>

<!-- 修改数据表单结束 -->

<!-- 设备转移表单 开始-->
<!-- <div class="layui-container" id="device_deliver_div" style="display: none;padding: 20px">
    <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green" style="text-align: center;">转移到</label>
      <div class="layui-input-block">
       <input type="text" list="deliver_target" name="" class="layui-input" id="dev_to_user">
        <datalist id="deliver_target">
        </datalist>
      </div>
    </div>
  </div>
  <table id="user_tree"  class="layui-table"></table>
</div> -->
<!-- 设备转移表单 结束-->

<!-- 设备导入处理开始 -->
<!-- <div class="layui-form-item" style="display: none;">
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">id</label>
      <div class="layui-input-block">
        <input type="text" name="device_input"  autocomplete="off" class="layui-input" id="device_input">
      </div>
    </div>
</div> -->
<!-- 设备导入处理结束 -->

<!-- 引入把上传的表格转变为json的插件 -->
<script src="/static/js/xlsx.js"></script>
<!-- js代码开始 -->

<script type="text/javascript">
// if(user_permi==='normal'){
//   $('#device_handle_permi').hide()
// }
var ajax_url='scanner'
// 设备数据表格渲染函数
var table_show=function(table_data){
  // console.log(table_data)
  table.render({
    elem: '#base_info_manage_table',
    toolbar:'#table_header',
    data: table_data,
    id:'base_info_manage_table',
    cols: [[
        {type: "checkbox", fixed: "left"},
        // {field: 'id', title: 'ID',width:20,sort:true},
        {field: 'name', title: '名称',sort:true},
        {field: 'device_id', title: '设备ID',sort:true},
        {field: 'position', title: '位置',sort:true,templet:function(d){
          var position=d.position;
          //console.log(position)
          if(position!=='0' && position!==''){
            position=eval('('+d.position+')')
            return '地图：'+position.map+',建筑：'+position.building+',坐标：'+position.location
          }else{
            return position
          }
        }},
        {field: 'model', title: '型号',sort:true},
        {field: 'kind', title: '类型',sort:true},
        {field: 'alarm_time', title: '报警时段',sort:true,templet:function(d){
          var param_set=eval('('+d.param_set+')')
          return param_set.alarm_time
        }},
        {field: 'remark', title: '备注'},
        {field: 'date_added', title: '添加时间',sort:true},
        {title: '操作', minWidth: 110, templet: '#table_info_handle_bar', fixed: "right", align: "center"}
    ]],
    limits: [10, 15, 20, 25, 50, 100],
    limit: 10,
    page: true
  });
}

var building_data,scanner_data;
var handle_get_func=function(data){
  building_data=data.building
  table_show(data.scanner)
}
// 首次用户数据加载
get_info_ajax(ajax_url,'get_init_data',handle_get_func)

// 监听添加按钮点击,打开弹窗
$(".data_handle_btn").on("click", function () {
    document.getElementById("handle_data_form").reset();
    fill_option(building_data,'building_list','name')
    $('#building_list').append('<option selected>'+'空'+'</option>')
    form.render();
    // 人员图片上传功能
    layer.open({
        type: 1
        ,title:'新增基站信息'
        // ,area:['450px','600px']
        ,offset:'60px'  
        ,id: 'add_data' //防止重复弹出
        ,content:$('#handle_data_form')
        ,shade: 0 //不显示遮罩
      });
});

// ----添加功能start----//

form.on('submit(add_submit)',function(obj){
  if(obj.field.device_id.length<5){
    layer.msg('设备编码至少5位')
    return false
  }
  var base_info=package_data(obj.field)
  base_info['show_icon']='scanner'
  console.log(base_info)
  post_info_ajax(base_info,ajax_url,'add',table_show)
  return false
})

// ----添加功能end----//



// ----监听编辑按钮，打开修改弹窗start---- //
table.on('tool(base_info_manage_table)', function (obj) {
  var result = obj.data;
  if(obj.event=='edit'){
    var base_info={};
    base_info['device_id']=result['device_id']
    base_info['name']=result['name']
    base_info['kind']=result['kind']
    base_info['model']=result['model']
    base_info['remark']=result['remark']
    var param_set=eval('('+result.param_set+')')
    base_info['alarm_time']=param_set['alarm_time']

    var position=eval('('+result.position+')')
    base_info=$.extend(base_info,position)
    var building=position.building
    if(building=='' | building=='0'){
      building='空'
    }
    base_info['building']=building
    //console.log(base_info)
    document.getElementById("edit_data_form").reset();
    form.val('edit_data_form',base_info)
    fill_option(building_data,'e_building_list','name')
    form.val('edit_data_form',base_info)
    if(building=='空'){
      $('#e_building_list').append('<option selected>'+'空'+'</option>')
    }else{
      $('#e_building_list').append('<option>'+'空'+'</option>')
    }
      
    layer.open({
      type: 1
      // ,area:['920px','550px']
      ,offset:'60px'  //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
      ,id: 'edit_data' //防止重复弹出
      ,content:$('#edit_data_form')
      ,shade: 0 //不显示遮罩
    });
  }else if(obj.event=='del'){
      layer.confirm("确定删除基站："+result.name+"？",
                {btn: ['是', '否']}, 
                function (index) {
                  post_info_ajax(result,ajax_url,'del',table_show)
                }
                ,function(){
                  //console.log('no')
                  layer.closeAll()
                });
  }

});

// ----监听编辑按钮，打开修改弹窗end---- //


// ----编辑数据提交后台功能start----//

form.on('submit(edit_submit)',function(obj){
  var base_info=package_data(obj.field)
  //console.log(base_info)
  post_info_ajax(base_info,ajax_url,'edit',table_show)
  return false
})

// ----编辑数据提交后台功能end----//


//封装数据
var package_data=function(result){
  var base_data={}
  if(result['name']==''){
    result['name']=result['device_id']
  }
  base_data['device_id']=result['device_id']
  base_data['name']=result['name']
  base_data['kind']=result['kind']
  base_data['model']=result['model']
  base_data['remark']=result['remark']
  var param_set={}
  param_set['alarm_time']=result['alarm_time']
  base_data['param_set']=JSON.stringify(param_set)
  if (result['building']=='空'){
    result['building']=''
  }
  var position={'map':result['map'],'building':result['building'],'location':result['location']}
  base_data['position']=JSON.stringify(position)
  return base_data
}


// 监听设备搜索操作
form.on('submit(data-search-btn)', function (data) {

  var search_key = data.field['search_key'];
  if(search_key!==''){
    // 调用index页面搜索函数
    //console.log(search_key,main_data['main'])
    var search_result=search_func(main_data['main'],search_key,'name','name_id')
    // 表格重载
    table_show(search_result)
  }else{
    table_show(main_data['main'])
  }
  return false;
});

laydate.render({
  elem: '#scanner_alarm_time'
  ,type: 'time'
  ,range: true
  ,format: 'HH:mm'
});

laydate.render({
  elem: '#e_scanner_alarm_time'
  ,type: 'time'
  ,range: true
  ,format: 'HH:mm'
});
</script>